<template>
	<view>
		<view class="head">
			<image @click="fanhui" :style="{ top: safeTop }" class="fanhui-img" src="../../static/index/fanhuib.png" mode=""></image>
			<view class="head-name" :style="[{ paddingTop: safeTop }, { height: menuH }, { lineHeight: menuH }]">畅打月卡</view>
			
			<view class="month-card-box">
				<image class="month-card-img" src="../../static/index/month-card.png" mode=""></image>
				<view class="shop-name"> <image src="../../static/index/dy.png" mode="aspectFill"></image> 店铺名·24H自助台球(红旗路店) </view>
				<view class="month-name">畅打卡月卡（30天）</view>
				<view class="month-explain">每天上午8:00-下午15:00可免费畅打仅限该单店可用，其他门店不通用</view>
				<view class="month-btn-box">
					<view class="month-btn month-btn1">￥ <text>298.0</text> </view>
					<view class="month-btn month-btn2">立即购买</view>
				</view>
			</view>
			
			<view class="explain">
				充值即可享受平台的充值赠送活动，故充值本金原则上不能提现，只可用于平台消费。若出现特殊情况，如门店倒闭导致无法消费，则可联系商家要求退还剩余未消费充值本金；
				畅打卡仅限在规定时段内免费打球使用，到截止时间点将自动关台；
				畅打卡仅限本人使用，仅支持室内台球畅玩，不支持街头室外共享台球和棋牌包间场景。
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuH: uni.getStorageSync('menuH') || '',
				safeTop: uni.getStorageSync('safeTop') || 20 + 'px'
			}
		},
		methods: {
			fanhui(){
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F8FA;
	}
	.head {
		width: 750rpx;
		height: 524rpx;
		background: linear-gradient(to bottom, #e6f6f2, #ddf0f5,#F6F7FA);
		position: relative;
		.fanhui-img {
			width: 48rpx;
			height: 48rpx;
			position: absolute;
			margin-left: 32rpx;
		}
		.head-name {
			font-weight: bold;
			font-size: 34rpx;
			color: #203460;
			text-align: center;
		}
		
		.month-card-box {
			width: 622rpx;
			height: 384rpx;
			margin: auto;
			padding: 32rpx;
			margin-top: 40rpx;
			position: relative;
			.month-card-img {
				width: 686rpx;
				height: 384rpx;
				position: absolute;
				top: 0;
				left: 0;
			}
			
			.shop-name {
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
				position: relative;
				z-index: 1;
				image {
					width: 36rpx;
					height: 36rpx;
					border-radius: 50%;
					vertical-align: middle;
					margin-right: 16rpx;
				}
			}
			.month-name {
				font-weight: 800;
				font-size: 36rpx;
				color: #FFFFFF;
				margin-top: 33rpx;
				position: relative;
			}
			.month-explain {
				position: relative;
				font-weight: 500;
				font-size: 22rpx;
				color: rgba(255,255,255,0.7);
				width: 360rpx;
				height: 100rpx;
				line-height: 32rpx;
				margin-top: 19rpx;
				
				display: -webkit-box; /* 将容器作为弹性盒子 */
				-webkit-box-orient: vertical; /* 垂直排列盒子内容 */
				-webkit-line-clamp: 3; /* 设置最大行数为1行 */
				overflow: hidden; /* 隐藏溢出的内容 */
				text-overflow: ellipsis; /* 使用省略号代替溢出的内容 */
			}
			
			.month-btn-box {
				position: relative;
				width: 300rpx;
				margin-top: 20rpx;
				display: flex;
				.month-btn {
					width: 150rpx;
					height: 75rpx;
				}
				.month-btn1 {
					background: #FFFFFF;
					border-radius: 16rpx 0rpx 0rpx 16rpx;
					font-weight: 500;
					font-size: 20rpx;
					color: #FA5623;
					line-height: 75rpx;
					text-align: center;
					text {
						font-weight: bold;
						font-size: 30rpx;
					}
				}
				.month-btn2 {
					background: #202936;
					border-radius: 0rpx 16rpx 16rpx 0rpx;
					font-weight: 500;
					font-size: 26rpx;
					color: #FFFFFF;
					line-height: 75rpx;
					text-align: center;
				}
			}
		}
		
		.explain {
			font-weight: 500;
			font-size: 22rpx;
			color: #A4A9B7;
			line-height: 36rpx;
			padding: 48rpx 32rpx 0 32rpx;
		}
	}
</style>
